<script setup lang="ts">
import { toPercent } from '@/utils/filter'

withDefaults(
  defineProps<{
    title: string
    value: number | string | undefined
    color: string
  }>(),
  {}
)
</script>

<template>
  <div class="arrow-value" :class="[color]">
    <div>{{ title }}</div>
    :
    <div>{{ toPercent(value, 1, false, '%', 1) }}</div>
  </div>
</template>

<style lang="less" scoped>
.arrow-value {
  position: relative;
  display: flex;
  height: 24px;
  align-items: center;
  gap: 4px;

  font-family: Alibaba PuHuiTi 2;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px; /* 116.667% */
  color: #4a6d93;
  padding-left: 9px;
  &.country {
    color: var(--03, #ffbb53);
    &::before {
      content: '';
      position: absolute;
      transform: translate(calc(-100% - 4px), 25%);
      border-top: 5px solid #ffbb53;
      border-right: 6px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 6px solid transparent;
      border-radius: 4px;
    }
  }
  &.region {
    color: var(--03, #e17ef1);
    &::before {
      content: '';
      position: absolute;
      transform: translate(calc(-100% - 4px), -25%);
      border-top: 5px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 5px solid #e17ef1;
      border-left: 6px solid transparent;
      border-radius: 4px;
    }
  }
}
</style>
